function loadAccordion() {
	$( "#servers_accordion" ).accordion({
		header: "> div > h3",
		collapsible: true,
		autoHeight: false,
		navigation: true,
		active: false,
		//add change event callback
        change: function(e, ui) {
        	$(ui.newContent).find($("button")[0]).click();
        }    
			}).sortable({
				axis: "y",
				handle: "h3",
				stop: function( event, ui ) {
					// IE doesn't register the blur when sorting
					// so trigger focusout handlers to remove .ui-state-focus
					ui.item.children( "h3" ).triggerHandler( "focusout" );
				}
		});
}

function loadMailsTable(id) {
	$(id).dataTable({
		"sDom": 'R<"H"lfr>t<"F"ip>',//column resizing and reordering
		"bStateSave": true,
    	"bPaginate": false,
    	"bFilter" : false,
    	"bInfo": false,
    	"bProcessing": true,
    	"bAutoWidth": false,
    	"aoColumns": [
    	              { "sWidth": "20%", "sClass": "no_wrap" },
    	              { "sWidth": "60%", "sClass": "no_wrap" },
    	              { "sWidth": "20%", "sClass": "no_wrap", "sType": "date" },
    	          ],
    	"sScrollX": "100%",
    	"bScrollCollapse": true,
    	"bJQueryUI": true,
    	"aaSorting": [[ 2, "desc" ]]
    });
	
	/* Add/remove class to a row when clicked on */
    $(id + ' tr')
	    .click( function() {
	        alert('abrir o mail');
	    });
    
    //add a pointer style to the mouse when hover the rows of the table
    $(id + ' tr').addClass('pointer');
}

function loadButtons() {
	 var selected = undefined;
	
	$("button").each(function(index, button) {
		$(button).bind('click', function() {
			
			if(selected) {
	            $(selected).button('enable')
	            .removeClass('ui-state-active ui-state-hover'); 
	        }    

	        //Disable this and keep color attributes
	        $(this).button('disable').addClass('ui-state-active').removeClass('ui-state-disabled'); 

	        //Cache the previous
	        selected = this;
			
	        //button action
			var server = $(this).parents(".server");
			$.getJSON("server/mail/listAll", { 
					folder: $(this).attr("id") ,
					serverId: $(server).attr("id") ,
					action: "null"
				}, function(folder) {//allways runs
					
				})
				.error(function(folder) {//error
					
				})
				.success(function(folder) {//success 2
					var mails = '<div id="mails"><table class="display" id="mails_table">';
					mails += '<thead><tr><th>From</th><th>Subject</th><th>When</th></tr></thead><tbody>';
			        $.each(folder.mails, function(key, value) {
			        	mails += '<tr><td title=' + value.fromAddress + '>' + value.fromName + '</td>';
			        	mails += '<td>' + value.subject + '</td>';
			        	mails += '<td>' + value.whenFormatted + '</td></tr>';
			        });
			        mails += '</tbody></table></div>';
			        $("#mails").replaceWith(mails);
			        loadMailsTable('#mails_table');
				})
				.complete(function(folder) {//complete
					
				});
		});
	});
}